function Trail() {
  this.x = 0;
  this.y = 0;
  this.trail = [];
  this.timer = 0;
}

Trail.prototype.update = function(x, y, dt) {
  this.x = x;
  this.y = y;
  this.timer += dt;
  if (this.timer > 0.02) {
    this.timer = 0;
    this.trail.push({x: x, y: y});
    if (this.trail.length > 20) {
      this.trail.shift();
    }
  }
}

Trail.prototype.render = function(context) {
  if (this.trail.length == 0) return;

  context.lineCap = 'round';
  context.lineWidth = 5;
  context.beginPath();
  context.moveTo(this.x, this.y);
  var lastPoint = this.trail[0];
  var gradient = context.createLinearGradient(this.x, this.y,
      lastPoint.x, lastPoint.y);
  gradient.addColorStop(0, 'rgba(255, 255, 255, 0.75)');
  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
  context.strokeStyle = gradient;
  for (var i = this.trail.length - 1; i >= 0; i--) {
    context.lineTo(this.trail[i].x, this.trail[i].y);
  }
  context.stroke();

  /*for (var i = this.trail.length - 1; i >= 0; i--) {
    var alpha = i / this.trail.length * 1.0;
    context.strokeStyle = 'rgba(255, 255, 255, ' + alpha + ')';  
    context.lineTo(this.trail[i].x, this.trail[i].y);
    context.stroke();
    context.beginPath();    
    context.moveTo(this.trail[i].x, this.trail[i].y);  
  }*/
}
